<template>
  <div class="swiper">
    <el-carousel :autoplay="false" trigger="click" indicator-position="outside" height="500px">
      <el-carousel-item class="el-carousel__item" v-for="(item,index) in banners" :key="index">
        <el-image class="carousel-images" :src="item.data" fit="fill"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "Swipper",
  props:{
    banners:[]
  },
}
</script>

<style scoped>
  .swiper {
    height: 530px;
    width: 100%;
    margin: 0 auto;
  }
  .el-carousel__item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .carousel-images {
    width: 100%;
    /*max-width: 100%;*/
    /*max-height: 100%;*/
  }
</style>